<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="浪起来" @click="start">
        <input type="button" value="停止" @click="stop">

        <h3>{{ msg }}</h3>
    </div>

    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            data: {
                msg: '我拿Buff,谢谢~',
                timer: '',
                // flag: true
            },
            methods: {

                start() {
                    if (this.timer !== '') return
                    const arr = this.msg.split('')
                    this.timer = setInterval(() => {
                        let item = arr.splice(0, 1)
                        arr.splice(arr.length, 0, item.join(''))
                        this.msg = arr.join('')
                    }, 50)
                    // clearInterval(timer)
                    // timer()
                    // console.log(this.msg.split('').splice(0, 1));
                    // const arr = this.msg.split('')
                    // let item = arr.splice(0, 1)
                    // // console.log(arr.splice(arr.length, 0, item));
                    // // arr.push(item)  //长度
                    // // console.log(item);
                    // arr.splice(arr.length, 0, item.join(''))
                    // console.log(arr.join(''));
                    // newArr.join('')
                    // console.log();
                },
                stop() {
                    clearInterval(this.timer)
                    this.timer = ''
                }
            }
        }).$mount('#app')
    </script>
</body>

</html>